<template>
  <view class="join-fee-page">
    
    
    <!-- 吸顶标签栏 - 添加渐变背景和底部阴影 -->
    <view
      class="sticky-tabs"
      v-if="showTabs"
      :style="{ opacity: tabsOpacity }"
    >
      <view
        v-for="(tab, idx) in tabs"
        :key="tab"
        :class="['tab', currentTab === idx ? 'active' : '']"
        @click="scrollToSection(idx)"
      >
        {{ tab }}
        <!-- 活动标签的下划线指示器 -->
        <view v-if="currentTab === idx" class="tab-indicator"></view>
      </view>
    </view>

    <!-- 内容区 - 添加ref用于获取实例 -->
    <scroll-view
      class="content-scroll"
      scroll-y
      :scroll-top="scrollTop"
      @scroll="onScroll"
      :refresher-enabled="false"
      scroll-with-animation
      :scroll-animation-duration="300"
      ref="scrollView"
    >
      <view class="content-card">
		  <!-- 顶部背景装饰图 -->
		  <image class="top-bg" src="/static/img/background/banner.jpg" mode="widthFix" />
        <!-- 添加顶部标题区域 -->
        <view class="header-section">
          <text class="main-title">加盟费用详情</text>
          <text class="sub-title">全方位加盟支持，助您轻松创业</text>
        </view>
        
        <!-- 添加图标装饰 -->
        <view class="decorative-icons">
          <view class="icon-item">
            <image src="/static/icons/money.png" class="icon-img" />
            <text>费用透明</text>
          </view>
          <view class="icon-item">
            <image src="/static/icons/process.png" class="icon-img" />
            <text>流程简单</text>
          </view>
          <view class="icon-item">
            <image src="/static/icons/support.png" class="icon-img" />
            <text>全程支持</text>
          </view>
        </view>
        
        <!-- 内容区块 -->
        <view
          v-for="(tab, idx) in tabs"
          :key="tab"
          :id="'section' + idx"
          class="section"
        >
          <!-- 添加区块图标 -->
          <view class="section-header">
            <image :src="getSectionIcon(idx)" class="section-icon" />
            <text class="section-title">{{ tab }}</text>
          </view>
          
          <!-- 优化内容展示 -->
          <view class="section-content">
            <template v-if="idx === 0">
              <view class="fee-item" v-for="(item, i) in feeItems" :key="i">
                <text class="fee-label">{{ item.label }}</text>
                <text class="fee-value">{{ item.value }}</text>
              </view>
              <view class="total-fee">
                总投资约: <text class="highlight">15-25万元</text>
              </view>
            </template>
            
            <template v-else-if="idx === 1">
              <view class="process-steps">
                <view v-for="(step, i) in processSteps" :key="i" class="step-item">
                  <view class="step-index">{{ i + 1 }}</view>
                  <text class="step-text">{{ step }}</text>
                </view>
              </view>
            </template>
            
            <template v-else-if="idx === 4">
              <view class="faq-item" v-for="(faq, i) in faqItems" :key="i">
                <text class="faq-question">Q: {{ faq.q }}</text>
                <text class="faq-answer">A: {{ faq.a }}</text>
              </view>
            </template>
            
            <template v-else>
              <view class="info-item" v-for="(item, i) in getSectionData(idx)" :key="i">
                <image src="/static/icons/check.png" class="item-icon" />
                <text class="item-text">{{ item }}</text>
              </view>
            </template>
          </view>
        </view>
        
        <!-- 底部联系按钮 -->
        <view class="contact-section">
          <button class="contact-btn" @click="handleContact">
            <image src="/static/icons/phone.png" class="btn-icon" />
            立即咨询加盟详情
          </button>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['加盟费用', '合作流程', '加盟条件', '加盟优势', '常见问题'],
      currentTab: 0,
      showTabs: false,
      scrollTop: 0,
      sectionTops: [],
      tabsOpacity: 1, // 控制标签栏透明度
      feeItems: [
        { label: '加盟费:', value: '3万元' },
        { label: '保证金:', value: '2万元(可退还)' },
        { label: '装修费:', value: '8-15万元' },
        { label: '设备费:', value: '5-8万元' },
        { label: '首批物料:', value: '2万元' }
      ],
      processSteps: [
        '提交申请表单',
        '总部资质审核(1-3个工作日)',
        '签订加盟合同',
        '选址评估与店铺设计',
        '总部培训与开业筹备',
        '正式开业运营'
      ],
      faqItems: [
        { q: '加盟需要什么条件?', a: '认可品牌理念，有资金实力和合适的经营场所' },
        { q: '总部提供哪些支持?', a: '选址评估、培训、运营指导、物流配送等全方位支持' },
        { q: '投资回报周期多久?', a: '通常8-12个月可回本，具体视店铺运营情况而定' },
        { q: '是否有区域保护政策?', a: '是的，我们实行严格的区域保护，保障加盟商利益' }
      ]
    }
  },
  mounted() {
    this.calcSectionTops();
    // 添加窗口 resize 监听
    uni.onWindowResize(() => {
      this.calcSectionTops();
    });
  },
  methods: {
    // 获取区块图标
    getSectionIcon(idx) {
      const icons = [
        '/static/icons/fee.png',
        '/static/icons/process.png',
        '/static/icons/condition.png',
        '/static/icons/advantage.png',
        '/static/icons/faq.png'
      ];
      return icons[idx];
    },
    
    // 获取区块内容数据
    getSectionData(idx) {
      const data = [
        ['认可品牌经营理念', '自有资金30万以上', '有合适商业场地(≥30㎡)', '愿意接受总部统一培训', '具备基本经营管理能力'],
        ['品牌知名度支持', '独家产品配方提供', '15公里区域保护', '持续新品研发支持', '完善供应链体系', '全程运营指导'],
      ];
      return data[idx - 2] || [];
    },
    
    onScroll(e) {
      const scrollTop = e.detail.scrollTop;
      this.scrollTop = scrollTop;
      
      // 控制吸顶标签栏显示和透明度
      this.showTabs = scrollTop > 60;
      this.tabsOpacity = scrollTop > 200 ? 1 : Math.min(1, (scrollTop - 60) / 140);
      
      // 计算当前激活的标签
      for (let i = this.sectionTops.length - 1; i >= 0; i--) {
        if (scrollTop + 100 >= this.sectionTops[i]) {
          if (this.currentTab !== i) {
            this.currentTab = i;
          }
          break;
        }
      }
    },
    
    // 精确计算区块位置
    calcSectionTops() {
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select('.content-card').boundingClientRect();
        
        this.tabs.forEach((_, idx) => {
          query.select(`#section${idx}`).boundingClientRect();
        });
        
        query.exec(res => {
          if (!res || res.length === 0) return;
          
          const cardRect = res[0];
          if (!cardRect) return;
          
          this.sectionTops = [];
          for (let i = 1; i < res.length; i++) {
            if (res[i]) {
              // 计算相对于 content-card 顶部的距离
              const top = res[i].top - cardRect.top + this.scrollTop;
              this.sectionTops.push(top);
            }
          }
        });
      });
    },
    
    // 滚动到指定区块
    scrollToSection(idx) {
      if (idx >= 0 && idx < this.sectionTops.length) {
        this.currentTab = idx;
        this.scrollTop = this.sectionTops[idx] - 20; // 减去偏移量留出标题空间
        
        // 确保触发滚动
        this.$nextTick(() => {
          this.scrollTop = this.sectionTops[idx] - 20;
        });
      }
    },
    
    // 处理联系按钮点击
    handleContact() {
      uni.makePhoneCall({
        phoneNumber: '400-123-4567'
      });
    }
  }
}
</script>

<style scoped lang="scss">
.join-fee-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #fef5f5 0%, #f8f9fa 100%);
  position: relative;
  padding-bottom: env(safe-area-inset-bottom);
}

.top-bg {
  width: 100%;
  height: 320rpx;
  display: block;
  border-bottom-left-radius: 30rpx;
  border-bottom-right-radius: 30rpx;
}

.sticky-tabs {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  background: linear-gradient(to right, #fff6f6, #fff);
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 190rpx;
  box-shadow: 0 4rpx 16rpx rgba(222, 145, 144, 0.15);
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
  backdrop-filter: blur(10rpx);
}

.tab {
  font-size: 28rpx;
  color: #666;
  margin-top: 100rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: color 0.3s;
  
  &.active {
    color: #e4393c;
    font-weight: 600;
  }
}

.tab-indicator {
  // position: absolute;
  margin-top: -60rpx;
  bottom: 10rpx;
  width: 50rpx;
  height: 6rpx;
  background: #e4393c;
  border-radius: 3rpx;
  transition: all 0.3s;
}

.content-scroll {
  height: calc(100vh - 60rpx);
  margin-top: -80rpx;
}

.content-card {
  background: #fff;
  border-radius: 40rpx 40rpx 0 0;
  padding: 40rpx 30rpx 140rpx;
  box-shadow: 0 -8rpx 30rpx rgba(222, 145, 144, 0.08);
}

.header-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0 40rpx;
  
  .main-title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 16rpx;
  }
  
  .sub-title {
    font-size: 28rpx;
    color: #de9190;
  }
}

.decorative-icons {
  display: flex;
  justify-content: space-around;
  margin: 0 0 40rpx;
  padding: 30rpx 0;
  background: #fffaf9;
  border-radius: 20rpx;
  
  .icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    text {
      font-size: 24rpx;
      color: #666;
      margin-top: 12rpx;
    }
  }
  
  .icon-img {
    width: 60rpx;
    height: 60rpx;
  }
}

.section {
  margin-bottom: 60rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.03);
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
  
  .section-icon {
    width: 44rpx;
    height: 44rpx;
    margin-right: 20rpx;
  }
  
  .section-title {
    font-size: 34rpx;
    font-weight: bold;
    color: #de9190;
  }
}

.section-content {
  padding: 10rpx 0;
}

.fee-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 1rpx dashed #f0f0f0;
  
  .fee-label {
    font-size: 30rpx;
    color: #666;
  }
  
  .fee-value {
    font-size: 30rpx;
    color: #e4393c;
    font-weight: 500;
  }
}

.total-fee {
  text-align: right;
  font-size: 32rpx;
  padding-top: 30rpx;
  color: #333;
  
  .highlight {
    color: #e4393c;
    font-weight: bold;
    font-size: 36rpx;
  }
}

.process-steps {
  .step-item {
    display: flex;
    align-items: center;
    padding: 25rpx 0;
    border-bottom: 1rpx solid #f8f8f8;
    
    .step-index {
      width: 44rpx;
      height: 44rpx;
      background: linear-gradient(135deg, #ffd1d1, #de9190);
      border-radius: 50%;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26rpx;
      margin-right: 25rpx;
      flex-shrink: 0;
    }
    
    .step-text {
      font-size: 28rpx;
      color: #555;
      line-height: 1.6;
    }
  }
}

.info-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  
  .item-icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 20rpx;
  }
  
  .item-text {
    font-size: 28rpx;
    color: #555;
    line-height: 1.6;
  }
}

.faq-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  
  .faq-question {
    display: block;
    font-size: 30rpx;
    color: #de9190;
    font-weight: 500;
    margin-bottom: 15rpx;
  }
  
  .faq-answer {
    display: block;
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
    padding-left: 40rpx;
  }
}

.contact-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx;
  background: #fff;
  box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.05);
  z-index: 50;
}

.contact-btn {
  background: linear-gradient(90deg, #de9190, #e4393c);
  color: #fff;
  height: 90rpx;
  border-radius: 50rpx;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 20rpx rgba(222, 145, 144, 0.4);
  
  .btn-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 15rpx;
  }
}
</style>